<!DOCTYPE html>
<html>

<head>
    <title>微信安全支付</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            background-color: #eeeeee;
            font-family: '黑体';
        }

        .pay-main {
            background-color: #4cb131;
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
        }

        .pay-main img {
            margin: 0 auto;
            display: block;
        }

        .pay-main .lines {
            margin: 0 auto;
            text-align: center;
            color: #cae8c2;
            font-size: 12pt;
            margin-top: 10px;
        }

        .tips .img {
            margin: 20px;
        }

        .tips .img img {
            width: 20px;
        }

        .tips span {
            vertical-align: top;
            color: #ababab;
            line-height: 18px;
            padding-left: 10px;
            padding-top: 0px;
        }

        .action {
            background: #4cb131;
            padding: 10px 0;
            color: #ffffff;
            text-align: center;
            font-size: 14pt;
            border-radius: 10px 10px;
            margin: 15px;
        }

        .action:focus {
            background: #4cb131;
        }

        .action.disabled {
            background-color: #aeaeae;
        }

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            padding-bottom: 20px;
            font-size: 10pt;
            color: #aeaeae;
        }

        .footer .ct-if {
            margin-top: 6px;
            font-size: 8pt;
        }
    </style>
</head>

<body>
<div class="conainer">
    <div class="pay-main">
        <img src=""/>
        <div class="lines"><span>微信安全支付</span>
        </div>
    </div>
    <div class="tips">
        <div class="img">
            <img src=""/>
            <span>已开启支付安全</span>
        </div>
    </div>
    <div id="action" class="action" onclick="onBridgeReady();">确认支付</div>
    <div class="footer">
        <div>支付安全由中国人民财产保险股份有限公司承保</div>
        <div class="ct-if"></div>
    </div>
</div>

<script src="https://g.onlinfei.com/xiaowei/js/??jquery.min.js,qcloud_util.js?v1"></script>

<?php if ($result['data']['pay_info']) { ?>
    <script src="https://g.onlinfei.com/layer/layer.js?v1"></script>
    <script>
        function onBridgeReady() {
            WeixinJSBridge.invoke('getBrandWCPayRequest', <?php echo $result['data']['pay_info']; ?> , function (res) {
                if (res.err_msg === "get_brand_wcpay_request:ok") {
                    var loadMsg = layer.msg('付款成功, 正在验证中...', {time: 0});
                    // 检查是否支付完成
                    var r = window.setInterval(function () {
                        $.ajax({
                            type: 'POST',
                            url: '<?php echo $domain . 'query.php'; ?>',
                            data: 'order=<?php echo $out_trade_no; ?>',
                            dataType: 'json',
                            success: function (res) {
                                if (res.status === 1) {
                                    layer.msg('验证成功, 正在返回', {time: 0});
                                    window.location.href = res.url;
                                    window.clearInterval(r);
                                }
                            }
                        });
                    }, 2000);
                }
            });
        }

        function close() {
            WeixinJSBridge.call('closeWindow');
        }

        $(document).ready(function () {
            document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                // 通过下面这个API隐藏右上角按钮
                WeixinJSBridge.call('hideOptionMenu');
            });
        });
        $(document).ready(function () {
            $('body').on('touchmove', function (event) {
                event.preventDefault();
            });
        });

        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    </script>

<?php }else{ ?>

    <script src="https://g.onlinfei.com/layer/mobile/layer.js?v1"></script>
    <script>
        $(function () {
            layer.open({
                type: 2,
                content: '正在提交支付'
            });
            window.location.href = "<?php echo $url; ?>";
        });
    </script>

<?php } ?>
</body>

</html>